<template>
	<view class="catemianbox">
		<qi_navigation />
		<view class="qisearch">
			<text class="iconfont icon-icon-test12"></text>
			<input @confirm="confirm" v-model.lazy="data.keyword"  @input="changesearch"/>
			<view
				v-if="Object.keys(data.keyword).length !== 0"
				class="iconfont icon-icon-test44"
				@tap="tapsubicon"
			></view>
		</view>
		<view class="catecenter">
			<scroll-view class="scrollleft" scroll-y>
				<view
					class="lftcategorcs"
					@tap="Tapgoriesid(item.id)"
					v-for="item in data.categories"
					:key="item.id"
					:class="activeindex == item.id ? 'active' :''"
				>
					<text>{{ item.name }}</text>
				</view>
			</scroll-view>
			<scroll-view
				class="scrollright"
				scroll-y
				:scroll-top="scrollTop"
				@scrolltolower="tolower"
				@scroll="refscroll"
			>
				<view
					class=" back-top"
					v-show="isShow"
					@tap="TapclickNavback"
				>
					<view class="iconfont icon-qudingbu"></view>
				</view>
				<view class="rigmian">
					<view
						v-for="(item, i) in data.goods"
						:key="i"
						class="rigtgoodcs"
						@tap="Tapsubdetail(item.id)"
					>
						<view class="imgitem">
						<!-- 	<image
								 :src="item.cover_url"
								mode="widthFix"
								class="itemimg"
							></image> -->
							<wu-image
							    :show-loading="true"
							    :src="item.cover_url"
							    mode="widthFix"
								width="100rpx"
								height="100rpx"
							  ></wu-image>
							    <!-- class="itemimg" -->
						</view>
						<text>{{ item.title }}</text>
					</view>
				</view>
				<qi_tolower>
					<view v-show="!isLastPage">加载中。。。</view>
				</qi_tolower>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import {
	reactive,
	toRefs,
	ref,
	onMounted,
	getCurrentInstance
} from 'vue';
import { getcatelist } from '@/http/cate.js';
import { onLoad } from '@dcloudio/uni-app';
const data = reactive({
	categories: [],
	goods: [],
	currentId: null,
	// 选中卡片ID(初始为2)
	// currentId: null,
	num: 1,
	keyword: ''
});
let isLastPage = ref(false);
let page = ref(1);
let scrollTop = ref(0);
let isShow = ref(false);
let activeindex = ref(0)

const { proxy } = getCurrentInstance();
onLoad(() => {
	getCateAndProData();
});
onMounted(() => {
	if (!isLastPage.value) {
		page.value += 1;
		getgoods();
	}
});
const Tapsubdetail = id => {
	uni.navigateTo({
		url: '/pages/cate/childer/details/details?id=' + id
	});
};
const changesearch = () =>{
	proxy.islogin.throttle(confirm(),500)
}
const getCateAndProData = () => {
	const params = {
		page: page.value,
		title: data.keyword,
		category_id: data.currentId
	};
	getcatelist(params).then(res => {
		console.log(res);
		if (Object.keys(res.categories) !== 0) {
			data.categories = res.categories
				.slice(0, 5)
				.map(item => {
					return item.children.slice(0, 3);
				})
				.flat(Infinity);
		}
		// #ifndef MP-WEIXIN
		data.goods = [...data.goods, ...res.goods.data];
		isLastPage.value = res.goods.next_page_url ? false : true;
		// #endif
		// #ifdef MP-WEIXIN
		data.goods = [...data.goods, ...res.recommend_goods];
		isLastPage.value = res.recommend_goods ? false : true;
		// #endif
		// 判断当前数据是否存在下一页
	});
};
const getgoods = () => {
	// // 整理参数
	const params = {
		page: page.value,
		title: data.keyword,
		category_id: data.currentId
	};
	getcatelist(params).then(res => {
		data.categories = res.categories
			.slice(0, 5)
			.map(item => {
				return item.children.slice(0, 3);
			})
			.flat(Infinity);
		// #ifndef MP-WEIXIN
		data.goods = [...data.goods, ...res.goods.data];

		isLastPage.value = res.goods.next_page_url ? false : true;
		// #endif
		data.goods = [...data.goods, ...res.recommend_goods];
		isLastPage.value = res.recommend_goods ? false : true;
		console.log(res);
		// 判断当前数据是否存在下一页
	});
};
const tolower = () => {
	if (!isLastPage.value) {
		page.value += 1;
		getgoods();
	} else {
		proxy.islogin.showToast('触底了');
	}
};
const TapclickNavback = () => {
	scrollTop.value = scrollTop.value === 0 ? 1 : 0;
};
const Tapgoriesid = id => {
	activeindex.value = id
	// 如果点击当前卡片不进行操作
	if (id == data.currentId) return;
	// 改变当前卡片序号
	data.currentId = id;
	// 清除数据缓存
	clearSearchCache();
	// 调用更新搜索数据
	getgoods();
};
const clearSearchCache = () => {
	page.value = 1;
	data.goods = [];
};
const tapsubicon = () => {
	data.keyword = '';
};
const refscroll = e => {
	scrollTop.value = e.detail.scrollTop;
	e.detail.scrollTop > 600
		? (isShow.value = true)
		: (isShow.value = false);
};
const confirm = () => {
	// 清除数据缓存
	clearSearchCache();
	// 调用更新搜索数据
	getgoods();
};
</script>

<style lang="scss">
.catemianbox {
	.back-top {
		position: fixed;
		bottom: 150rpx;
		right: 20rpx;
		text-align: center;
		z-index: 9;
		.iconfont {
			font-size: 16rpx;
			line-height: 50rpx;
			box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.4);
			height: 50rpx;
			width: 50rpx;
			border-radius: 50%;
			background-color: #fff;
			// z-index: -10;
			color: red;
		}
	}
	.qisearch {
		position: relative;
		height: 50px;
		display: flex;
		align-items: center;
		padding: 0 10px;
		background: linear-gradient(to right, #3388ee, #4db9f1);
		> input {
			background-color: #fff;
			flex: 1;
			border-radius: 90px;
			height: 36px;
			display: flex;
			align-items: center;
			font-size: 14rpx;
			padding-left: 30px;
		}
		.icon-icon-test44 {
			position: absolute;
			right: 20px;
		}
		.icon-icon-test12 {
			position: absolute;
			left: 20px;
		}
	}
	.catecenter {
		display: flex;
		.scrollleft {
			width: 200px;
			height: calc(100vh - 100px - var(--window-bottom));
		 // #ifndef H5 
			// height: calc(100vh - 100px - var(--window-bottom) - 20px);
			// #endif
			background-color: #f7f7f7;
			.active {
				background-color: #ffffff;
				position: relative;
				&::before {
					content: ' ';
					display: block;
					width: 3px;
					height: 30px;
					background-color: #c00000;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
				}
			}
			.lftcategorcs {
				display: flex;
				height: 50px;
				justify-content: center;
				align-items: center;
				padding: 10px 0;
				box-sizing: border-box;
				font-size: 20rpx;
			}
		}
		.scrollright {
			height: calc(100vh - 100px  - var(--window-bottom));
			// #ifdef MP
			height: calc(100vh - 100px - var(--window-bottom) - 20px);
			// #endif
			background-color: #fff;
			.rigmian {
				display: flex;
				flex-wrap: wrap;
				flex: 1;
				.rigtgoodcs {
					width: 33.33%;
					box-sizing: border-box;
					padding: 10px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
						
					.imgitem{
						display: flex;
						align-items: center;
						justify-content: center;
					}
					text {
						font-size: 20rpx;
						font-weight: normal;
						display: inline-block;
						white-space: nowrap;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						text-align: center;
					}
				}
			}
		}
	}
}
</style>
